import React from 'react';
import {  View,Text } from 'react-native';
class Index extends React.Component{
  // state={
  //   num:100
  // }

//1 构造函数
  constructor() {
    super();
    console.log("1 构造函数");
    //对state做初始化
    this.state={
      num:100,
      show:true
    }
  }

  //3 组件挂载完毕
  componentDidMount() {
    console.log("3 组件挂载完毕")
  }

  handlePress=()=>{
    this.setState({
      num: Date.now()
    })
  };

  handleToggle=()=>{
    this.setState({
      show:!this.state.show
    })
  }
  render() {
    console.log("2 render 视图的渲染 视图更新")
    return <View>
      <Text onPress={this.handlePress}>{this.state.num}</Text>
      <Text onPress={this.handleToggle}>切换显示</Text>
      {this.state.show?<Btn></Btn>:<></>}
    </View>
  }
}

class Btn extends React.Component{

  componentWillUnmount() {
    console.log("4. 组件被卸载")
  }

  render() {
    return <View><Text>按钮</Text></View>;
  }
}
//https://blog.csdn.net/Jane_96/article/details/86368630?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1328767.27036.16174379204329213&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
export default Index;
